<template>
  <div>
    <button @click="isshow = !isshow">tap</button>
    <router-link to="/jsTransition">去JavaScript 钩子动画</router-link>
    <router-link to="/more">去多个元素过渡动画</router-link>
    <router-link to="/more_components">去多个组件过渡动画</router-link>
    <router-link to="/list_transition_group">去列表过渡动画</router-link>

    <div class="txt">22222</div>

    <transition name="fade">
      <p v-if="isshow">我是vue简单的动画</p>
    </transition>

    <transition name="slide-fade">
      <p v-if="isshow">我是vue简单的动画2</p>
    </transition>

    <transition
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <p v-if="isshow">自定义动画过度的类名</p>
    </transition>

    <transition mode="out-in" name="slide-fade" appear>
      <trainsition v-if="isshow" />
    </transition>
  </div>
</template>

<script>
import trainsition from "@c/transition";
export default {
  components: { trainsition },
  data() {
    return {
      isshow: true
    };
  },
  created() {},
  methods: {}
};
</script>

<style scoped>
p {
  margin: 50px;
  font-size: 26px;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
  opacity: 1;
  transform: scale(1);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: scale(0.6);
}

/* .slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
} */
.slide-fade-enter-active {
  animation: Vanimate 0.5s;
}

.slide-fade-leave-active {
  animation: Vanimate 0.5s reverse;
}

@keyframes Vanimate {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

a {
  margin: 0 10px;
}
</style>
